<template>
  <div>
    <el-row :gutter="10">
      <el-col
        :span="24"
        style="padding-left: 20px"
      >
        <h3 style="margin:0;background-color: #f9a338; padding: 12px; color: white; border-top-left-radius: 5px; border-top-right-radius: 5px">需要源码、有任何问题请联系唯一QQ:180233856。由于源码的特殊性，售出后不退还，请理解。</h3>
        <H4 style="margin:0;background-color: #fdcd91; padding: 5px; color: white">由于使用人数过多数据比较乱,数据库每两小时还原一次</H4>
        <p style="margin:0;background-color: #fdcd91; padding: 5px; color: white; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px">说明: 其他账户在系统设置->部门人员管理中查看,可以体验不同人员审批、会签、或签、加签、退回、转交、评论等功能</p>
      </el-col>
    </el-row>
    <el-row style="margin-top:20px;margin-left:20px;">
      <el-col :span="12">
        <el-table
          :data="tableData"
          style="width: 800px;"
          :border="true"
          :stripe="true"
          size="medium"
        >
          <el-table-column
            prop="item"
            label="功能"
          />
          <el-table-column
            prop="common"
            label="开源版"
            align="center"
          >
            <template slot-scope="scope">
              <i v-if="scope.row.common" class="el-icon-check green" />
              <i v-else class="el-icon-close red" />
            </template>
          </el-table-column>
          <el-table-column
            prop="vip2"
            label="尊享版(￥980)"
            align="center"
          >
            <template slot-scope="scope">
              <i v-if="scope.row.vip2" class="el-icon-check green" />
              <i v-else class="el-icon-close red" />
            </template>
          </el-table-column>
          <el-table-column
            prop="enterprise"
            label="企业版(￥2680)"
            align="center"
          >
            <template slot-scope="scope">
              <i v-if="scope.row.enterprise" class="el-icon-check green" />
              <i v-else class="el-icon-close red" />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="7">
        <div>
          <H2>企业版介绍</H2>
          <p>
            <span style="color: #409eff">企业版后端</span>采用<span style="color: #409eff">ABPvNext6.0微服务框架</span>,<span style="color: #409eff">.net6.0</span>版本。拥有更强大的权限系统，权限可控制到按钮、api级别。ABP本身使用多租户、模块化、领域驱动设计、微服务等架构设计，
            支持多个ORM切换，支持后台任务（HangFire，Quartz）集成、 事件总线、AutoMapper、审计日志、数据过滤等基础设施。企业版基于<span style="color: #409eff">Openiddict身份管理</span>，提供高级身份验证功能, 如单点登录和API访问控制。满足绝大部分企业需求。
          </p>
          <p><span style="color: #409eff">企业版前端</span>采用<span style="color: #409eff">Vue3.0+ElementPlus+vite+typescript</span>开发。</p>
          <p style="color: #409eff">
            演示地址：<a
              href="http://tptabp.tptclub.top/"
              target="_blank"
            >http://tptabp.tptclub.top/</a>
          </p><H3>尊享版介绍</H3>
          <p>尊享版后端采用.net6.0+EF开发。使用token身份认证。使用redis、AutoMapper、Autofac等</p>
          <p>尊享版前端采用vue2.0+ElementUI+JavaScript开发</p>
          <p style="color: #409eff">
            演示地址：<a
              href="https://demo.tptclub.top/"
              target="_blank"
            >https://demo.tptclub.top/</a>
          </p>
          <H3>Openiddict介绍</H3>
          <p><span style="color: #409eff">Openiddict</span>与<span style="color: #409eff">IDS4</span>一样做身份认证、授权服务，可帮助您快速添加OpenID Connect和OAuth 2.0支持到ASP.NET Core应用程序中。更多功能请自行了解</p>
          <H3>Ocelot网关介绍</H3>
          <p><span style="color: #409eff">Ocelot</span>是一个用.NET Core实现并且<span style="color: #409eff">开源的API网关</span>，它功能强大，除了路由、请求聚合、负载均衡等功能外，还可以集成Consul做服务发现，集成Polly做服务治理等。更多功能请自行了解</p>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div>
          <el-image style="width: 200px; height: 200px" :src="require('@/assets/images/H5.png')" />
          <div style="padding: 14px;">
            <span>H5体验码</span>
          </div>
        </div>
        <div>
          <el-image style="width: 200px; height: 200px" :src="require('@/assets/images/wxapplet.jpg')" />
          <div style="padding: 14px;">
            <span>微信小程序体验码</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-backtop :bottom="100">
      <el-popover
        placement="left-end"
        width="50"
        trigger="hover"
        content="回到顶部"
      >
        <div
          slot="reference"
          class="iconfont icon-dingbu1 padding-top-sm to-top text-xxl"
        >
          <div class="text-sm">回到顶部</div>
        </div>
      </el-popover>
    </el-backtop>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getApprovalLoading } from '@/api/flow/index'
export default {
  data() {
    return {
      pendingApprovalCount: 0, // 待办数量
      shuJuCount: 0,
      nopermission: true,
      flowInstanceId: '', // 流程实例id
      remburseAllMoney: 0,
      allBorrowMoney: 0,
      allNeedPayMoney: 0,
      userUnit: [],
      refresh: true,
      tableData: [
        {
          item: 'PC端源码',
          common: true,
          vip2: true,
          enterprise: true
        },
        {
          item: '内部文档',
          common: true,
          vip2: true,
          enterprise: true
        },
        {
          item: '技术咨询服务',
          common: true,
          vip2: true,
          enterprise: true
        },
        {
          item: '免费升级',
          common: false,
          vip2: true,
          enterprise: true
        },
        {
          item: 'H5源码',
          common: false,
          vip2: true,
          enterprise: true
        },
        {
          item: '微信小程序源码',
          common: false,
          vip2: true,
          enterprise: true
        },
        {
          item: 'UniApp源码',
          common: false,
          vip2: false,
          enterprise: true
        },
        {
          item: 'HangFire/Quartz',
          common: false,
          vip2: false,
          enterprise: true
        },
        {
          item: 'ocelot网关',
          common: false,
          vip2: false,
          enterprise: true
        },
        {
          item: 'OAuth2.0身份认证',
          common: false,
          vip2: false,
          enterprise: true
        },
        {
          item: '微服务',
          common: false,
          vip2: false,
          enterprise: true
        },
        {
          item: '电子发票',
          common: false,
          vip2: false,
          enterprise: true
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'name', 'unitname', 'permission_routers'])
  },
  watch: {
    permission_routers: function(obj) {
      this.$emit('reloadroute')
    },
    pendingApprovalCount: function(obj) {
      this.$store.dispatch('app/setTodo')
    }
  },
  created() {
    this.$nextTick(() => (
      this.$emit('reloadroute'))
    )
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src =
      'https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0'
    document.getElementsByTagName('head')[0].appendChild(script)
  },

  mounted() {
    this.handleRefresh()
  },
  methods: {
    handleRefresh() {
      getApprovalLoading().then(res => {
        this.pendingApprovalCount = res.Data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$subheight: 100px;
$twiceheight: 210px;
$thirdheight: calc((100vh - 200px) / 2);
.el-select-dropdown__item.selected {
  font-weight: normal;
}
.el-card-header {
  font-weight: bold;
}
.state-tag-pic {
  margin-top: 10px;
  right: 50px;
}
.el-dialog .el-container .el-main {
  padding: 20px 0;
}
.el-card {
  margin-top: 10px;
}
// .fee-total{

//   p{
//     margin:3px 0;
//   }
// }
.el-col {
  padding: 0;
  > .container,
  > .el-button {
    // border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 1px 1px 3px #ccc;
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
    // padding-left: 0;
    // padding-right: 0;
  }
  .no-padding {
    padding-left: 0;
    padding-right: 0;
  }
  .el-image {
    border-radius: 4px;
    overflow: hidden;
  }
  .align-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sub-height {
    height: $subheight;
  }
  .twice-height {
    height: $twiceheight;
  }
  .third-height {
    height: $thirdheight;
  }
  .person-info {
    text-align: center;
    height: 100px;
    .avater {
      height: 70px;
      width: 70px;
      border-radius: 50%;
      background-color: #ccc;
      margin: 5px 10px;
    }
    .department {
      padding: 0 5px;
      // border-left: 2px solid #ccc;
      margin-top: -10px;
      color: #ccc;
    }
  }
  .my-data {
    margin-right: 20px;
    text-align: center;
    padding-top: 15px;
    p {
      color: #aaa;
    }

    div {
      // padding: 0 30px;
      cursor: pointer;
      text-align: center;

      &:hover {
        background-color: #eee;
      }
    }
    // .border-right{
    //    border-right: 1px #ddd solid;
    //   }
  }
  .title {
    border-bottom: 1px solid #eee;
    padding: 5px 0 10px;
    display: flex;
    justify-content: space-between;
  }
  .main {
    height: calc(100% - 30px);
    overflow-y: scroll;
    > div:nth-child(2n) {
      background-color: #fafafa;
    }
    .list {
      height: 40px;
      .operation {
        // display: none;

        span {
          margin-left: 10px;
        }
      }
      &:hover {
        background-color: #f1f1f1 !important;
        cursor: pointer;
        // .operation{
        // display: inline;
        // }
      }
    }
  }
}
.echart-darkbg {
  background-color: #323d4f;
  color: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 10px;
  .my-total-reimb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 4px 10px;
    margin-bottom: 10px;
    box-shadow: none;
    text-align: center;
    div {
      flex-grow: 1;
    }
    div + div {
      border-left: 1px dashed rgba(255, 255, 255, 0.5);
    }
  }
}
.echart-lightbg {
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 3px #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 10px;
  .my-total-reimb {
    // background-color: rgba(188,207,241,0.2);
    //border-bottom:1px solid rgba(188,207,241,0.5);
    // border-radius: 4px;
    padding: 4px 10px;
    //margin-bottom: 10px;
    box-shadow: none;
    text-align: center;
    div {
      flex-grow: 1;
    }
    // div+div{
    //   border-left: 1px dashed rgba(188,207,241,0.5);
    // }
  }
}
.data-log {
  border-bottom: 1px #eee solid;
  padding: 10px;
  border-radius: 4px;
}
.el-timeline-item:hover .data-log {
  background-color: #f1f1f1;
}
.weather-v2-plugin-simple {
  z-index: 999;
}
.app-main > .el-container,
.app-main > div {
  border: none;
  background: none;
  box-shadow: none;
}
.el-carousel,
.el-carousel__item {
  height: $thirdheight;
}

.data-log:hover {
  background: #f1f1f1 !important;
  cursor: pointer;
}
.to-top,
.el-backtop {
  height: 100%;
  width: 100%;
  box-shadow: 0px 0px 5px rgba(233, 233, 233, 0.15);
  border: 1px solid #d9e9fa;
  border-radius: 4px;

  text-align: center;
  height: 70px;
  width: 70px;
  cursor: pointer;

  margin-top: 5px;
  color: #409eff;
  background-color: rgb(239, 245, 252);

  &:hover {
    background-color: #409eff;
    color: #fff;
  }
}
.right-button {
  position: fixed;
  right: 10px;
  bottom: 40px;
  transition: 1.5s;
  margin-top: 3px;
  height: 76px;
  width: 76px;
  overflow: hidden;
  z-index: 1025;
  &:hover {
    height: auto;
    .icon-applications {
      display: none;
    }
  }
}
.el-col + .el-col {
  border-top: none;
}

::v-deep.el-table {
      font-size: 20px;
 th, tr{
  height: 45px;
  }

.cell{
  line-height: 45px;
  height: 45px;
}
}
::v-deep p{
  margin:0;
}
</style>

